<template>
    <div class='main'>
        <div class='backgroundC'></div>
        <div class='bodyContent'>
            <comp-head :onActive='onActive'></comp-head>
            <comp-main v-if='menu == "1"'></comp-main>
            <comp-animation v-if='menu == "4"'></comp-animation>
        </div>
    </div>
</template>

<script>
import compHead from '../head/head'
import compMain from '../main/main'
import compAnimation from '../animation/animation'

export default {
    components: {
        compHead,
        compMain,
        compAnimation
    },
    data (){
        return {
            contentId: "compMain",
            menu: "1"
        }
    },
    methods: {
        onActive (res){
            debugger;
            this.menu = res;
        }
    }
}
</script>

<style>
    .main .backgroundC {
        background-image: url(~@/assets/images/bg1.jpg) !important;
        /* background-image: url(~@/assets/images/bg.jpg) !important; */
        position: fixed;
        background-repeat: no-repeat;
        top: 0;
        left: 0;
        z-index: 0;
        overflow: hidden;
        width: 100%;
        height: 100%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        opacity: 0.85;
    }

    .main {
        max-width: 1000px;
        margin:auto;
        background: #ffffff59;
    }

    .bodyContent {
        position:relative;
    }
</style>